<!--
 * @Description: 项目管理
 * @Author: Caroline
 * @Date: 2024-01-16 20:06:31
 * @LastEditTime: 2024-03-10 16:45:33
 * @LastEditors: Caroline
 * @FilePath: \Evaluation-web\src\views\project\list.vue
-->
<template>
  <div class="biz-box-wrap">
    <!-- 1、搜索区 -->
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.keyword" :placeholder="`${$t('project.name')}/${$t('project.director')}`" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-cascader @change="onAreaChange" :placeholder="$t('project.area')" filterable clearable :props="{ checkStrictly: true }" :options="areaList" />
      </el-form-item>

      <el-form-item>
        <el-cascader @change="onDeptChange" :placeholder="$t('project.dept')" filterable clearable :props="{ label: 'name', value: 'id', checkStrictly: true }" :options="deptList" />
      </el-form-item>

      <el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('assess:assessproject:save')" type="primary" @click="addOrUpdateHandle({ id: '' })">{{ $t("add") }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 2、表格区 -->
    <el-table max-height="calc(100vh - 256px)" v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
      <!-- 2.1、表格列 -->
      <el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
      <el-table-column prop="name" :label="$t('project.name')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="fullAreaName" :label="$t('project.area')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="directorName" :label="$t('project.director')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="price" :label="$t('project.price')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="totalLaunchNumber" :label="$t('project.totalLaunchNumber')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="launchNumber" :label="$t('project.count')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="fullDeptName" :label="$t('project.dept')" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createDate" :label="$t('dict.createDate')" sortable="custom" header-align="center" align="center" width="120">
        <template #default="{ row }"> {{ formatDate(row.createDate, "YYYY-MM-DD") }}</template>
      </el-table-column>

      <!-- 2.2、操作列 -->
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('assess:assessproject:info')" type="primary" link @click="addOrUpdateHandle(scope.row, 'detail')">{{ $t("detail") }}</el-button>
          <el-button v-if="state.hasPermission('assess:assessproject:update')" type="primary" link @click="addOrUpdateHandle(scope.row)">{{ $t("update") }}</el-button>
          <el-button v-if="state.hasPermission('assess:assessproject:delete')" type="danger" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import { formatDate } from "@/utils/date";
import { getNestedStructure } from "@/utils/utils";
import baseService from "@/service/baseService";
import AddOrUpdate from "./add-or-update.vue";

const view = reactive({
  getDataListURL: "/assess/assessproject/page",
  getDataListIsPage: true,
  deleteURL: "/assess/assessproject",
  deleteIsBatch: true,
  dataForm: {
    keyword: "",
    areaId: "",
    deptId: "",
    order: "desc",
    orderField: "create_date"
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

// 所属机构
const deptList = ref<{ id: string; name: string }[]>([]);
const getDeptList = () => {
  baseService.get("/sys/dept/list").then((res) => {
    deptList.value = res.data || [];
  });
};
getDeptList();
const onDeptChange = (val: string[]) => {
  state.dataForm.deptId = val ? val.slice(-1)[0] : "";
};

const areaList = ref<{ id: string; name: string }[]>([]);
const getAreaList = () => {
  baseService.get("/sys/region/child/tree").then((res) => {
    areaList.value = getNestedStructure(res?.data?.[0].children, 4, { keyName: "name", valueName: "id" }) || [];
  });
};
getAreaList();

const onAreaChange = (val: string[]) => {
  state.dataForm.areaId = val ? val.slice(-1)[0] : "";
};

const addOrUpdateRef = ref();
const addOrUpdateHandle = (row?: any, type?: string) => {
  addOrUpdateRef.value.init(row, type);
};
</script>
<style lang="less" scoped>
.project-img {
  width: 100px;
}
</style>
